// 计数器小按钮
import React from "react"
// 1. 状态的初始化
// 语法: state = { 基础类型数据 + 数组 + 对象 }

// 2. 使用数据
// this.state.xxx

// 3. 修改状态
// this.setState({ count: 新值 })

// 注意: setState方法的执行会引发数据的变化同时视图会自动使用新数据进行渲染


// 思想: 数据状态不可变

// 可变  vue  this.name = 'new name'
// 不可变  react  只可以把state这个对象做完整的替换 而不是单独给其中的某个数据做直接的修改
// 1. 简单类型的修改 
// 2. 数组的修改
// 3. 对象的修改

class Counter extends React.Component {
  // 状态的初始化 state为固定
  state = {
    count: 0,
    list: ['vue'],
    userInfo: {
      name: 'cp'
    }
  }

  add = () => {
    // 修改状态
    this.setState({
      count: this.state.count + 1,
      list: [...this.state.list, 'react'],
      userInfo: { ...this.state.userInfo, age: 18 }
    })
  }

  render () {
    return (
      <div>
        {/* 读取初始化状态 使用 */}
        {this.state.count}
        <button onClick={this.add}>+</button>
      </div>
    )
  }
}


function App () {
  return <div><Counter /></div>
}


export default App